<template>
  <div class="home">
    <!-- 头部文字图表 -->
    <div class="head">
      <div class="title">书虫世界</div>
      <div class="head_img">
        <img src="../assets/ren (2).png" alt="" />
        <router-link to="/bookrack">
          <img src="../assets/shujia.png" alt="" />
        </router-link>
      </div>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item>
        <router-link to="/searchResult/土味巨星">
          <van-image
            width="100%"
            height="100%"
            src="//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/4983defc64036911e897a0107ce640bc.jpg"
          />
        </router-link>
      </van-swipe-item>
      <van-swipe-item>
        <router-link to="/searchResult/从木叶开始逃亡">
          <van-image
            width="100%"
            height="100%"
            src="//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/a921f88a60624bd18406485d6be2b914.jpg"
          />
        </router-link>
      </van-swipe-item>
      <van-swipe-item>
        <router-link to="/searchResult/聊斋修仙">
          <van-image
            width="100%"
            height="100%"
            src="//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/90f8d850712c92adb3e62b26a63a9014.jpg"
          />
        </router-link>
      </van-swipe-item>
      <van-swipe-item>
        <router-link to="/searchResult/我真的不想成为天灾啊">
          <van-image
            width="100%"
            height="100%"
            src="//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/8ef04c79a9288a964e5ac4cc5e0b9ca3.jpg"
          />
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <div class="search">
      <router-link to="/search">
        <input type="text" placeholder="人类镇守使" />
        <img src="../assets/ss.png" alt="" />
      </router-link>
    </div>
    <!-- 宫格 -->
    <div class="grid">
      <!-- <div class="gridAll"> -->
      <div class="gridItem" @click="btnFenlei">
        <div class="gridimg">
          <img src="../assets/jltu_03.gif" alt="" />
        </div>
        <div class="text">分类</div>
      </div>
      <div class="gridItem" @click="btnPaihan">
        <div class="gridimg">
          <img src="../assets/jltu_01.gif" alt="" />
        </div>
        <div class="text">排行榜</div>
      </div>
      <div class="gridItem" @click="btnFree">
        <div class="gridimg">
          <img src="../assets/jltu_04.gif" alt="" />
        </div>
        <div class="text">免费</div>
      </div>
      <div class="gridItem" @click="btnOver">
        <div class="gridimg">
          <img src="../assets/jltu_01_02.gif" alt="" />
        </div>
        <div class="text">完本</div>
      </div>
      <div class="gridItem">
        <div class="gridimg">
          <img src="../assets/jltu_05.gif" alt="" />
        </div>
        <div class="text">大神</div>
      </div>
    </div>

    <!-- 热门小说 -->
    <div class="hotBook">
      <div class="hotTitle">
        <span class="zhu">热门小说</span>
        <span class="fu">起点编辑推荐</span>
      </div>
      <Loading v-show="!HotList.length"></Loading>
      <div class="hotAll">
        <div class="hotItem" v-for="(item, index) in HotList" :key="index">
          <router-link :to="`bookDetails/${item._id}`">
            <div class="itemimg">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
          </router-link>
          <div class="itemname">{{ item.title }}</div>
          <div class="author">{{ item.author }}</div>
        </div>
      </div>
    </div>
    <!-- 新书强推 -->
    <div class="recommend">
      <div class="one">新书推荐</div>
      <div class="two">三江·网文新风</div>
    </div>
    <!-- 限时免费 -->
    <div class="freeBook">
      <div class="freeTitle">
        <div>
          <span class="zhu">限时免费</span>
          <!-- <span class="fu">起点编辑推荐</span> -->
        </div>
        <!-- <div class="more">更多<img src="../assets/dayu.png" alt="" /></div> -->
      </div>
      <Loading v-show="!freeList.length"></Loading>
      <div class="freeAll">
        <div class="freeItem" v-for="(item, index) in freeList" :key="index">
          <router-link :to="`bookDetails/${item._id}`">
            <div class="itemimg">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemname">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="rankingBook">
      <div class="rankingTitle">
        <div>
          <span class="zhu">排行榜</span>
          <!-- <span class="fu">起点编辑推荐</span> -->
        </div>
        <div class="more">更多<img src="../assets/dayu.png" alt="" /></div>
      </div>
      <div class="rankingType">
        <span
          v-for="(item, index) in rankList"
          :key="index"
          :class="activeIndex == index ? 'active' : ''"
          @click="activeTitle(index, item._id)"
        >
          {{ item.shortTitle }}
        </span>
      </div>
      <Loading v-show="!rankDetailsList.length"></Loading>
      <div class="rankloading">
        <Loading v-show="isloadingRank"></Loading>
      </div>
      <div
        class="rankingAll"
        :style="{
          background: isloadingRank == true ? 'rgba(0, 0, 0, 0.4)' : '',
          filter: isloadingRank == true ? 'blur(10vw)' : '',
        }"
      >
        <div
          class="rankingItem"
          v-for="(item, index) in rankDetailsList"
          :key="index"
        >
          <router-link :to="`/bookDetails/${item._id}`">
            <div class="itemimg">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemname">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 新书抢鲜 -->
    <div class="newBook">
      <div class="newTitle">
        <div>
          <span class="zhu">新书抢鲜</span>
          <span class="fu">24小时热销新书</span>
        </div>
        <div class="more">
          <router-link
            :to="{
              path: '/morebook',
              query: {
                title: '新书抢鲜',
                type: 'new',
                major: '玄幻',
              },
            }"
            >更多<img src="../assets/dayu.png" alt=""
          /></router-link>
        </div>
      </div>
      <Loading v-show="!newList.length"></Loading>
      <div class="newAll">
        <div class="newItem" v-for="(item, index) in newList" :key="index">
          <router-link :to="`bookDetails/${item._id}`">
            <div class="itemleft">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemright">
              <div class="itemname">{{ item.title }}</div>
              <div class="synopsis">
                {{ item.shortIntro }}
              </div>
              <div class="bom">
                <div class="bom_left">
                  <img src="../assets/zz.png" alt="" />
                  <div class="author">{{ item.author }}</div>
                  <!-- 言归正传 -->
                </div>
                <div class="bom_right">
                  <span class="type">{{ item.majorCate }}</span>
                  <span class="isOk">连载中</span>
                  <span class="textNum">{{ item.retentionRatio }}万字</span>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 畅销完本 -->
    <div class="newBook">
      <div class="newTitle">
        <div>
          <span class="zhu">畅销完本</span>
          <span class="fu">今日畅销完本书</span>
        </div>
        <div class="more">
          <router-link
            :to="{
              path: '/morebook',
              query: {
                title: '畅销完本',
                type: 'over',
                major: '玄幻',
              },
            }"
            >更多<img src="../assets/dayu.png" alt=""
          /></router-link>
        </div>
      </div>
      <Loading v-show="!overList.length"></Loading>
      <div class="newAll">
        <div class="newItem" v-for="(item, index) in overList" :key="index">
          <router-link :to="`bookDetails/${item._id}`">
            <div class="itemleft">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemright">
              <div class="itemname">{{ item.title }}</div>
              <div class="synopsis">
                {{ item.shortIntro }}
              </div>
              <div class="bom">
                <div class="bom_left">
                  <img src="../assets/zz.png" alt="" />
                  <div class="author">{{ item.author }}</div>
                  <!-- 言归正传 -->
                </div>
                <div class="bom_right">
                  <span class="type">{{ item.majorCate }}</span>
                  <span class="isOk">完本</span>
                  <span class="textNum">{{ item.retentionRatio }}万字</span>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 分类推荐 -->
    <div class="categoryRec">
      <div class="cateTitle">
        <div>
          <span class="zhu">分类推荐</span>
          <span class="fu">频道主编推荐</span>
        </div>
        <div class="more">
          <router-link to="/category">
            更多<img src="../assets/dayu.png" alt="" />
          </router-link>
        </div>
      </div>
      <div class="cateType">
        <span
          v-for="(item, index) in classifyList"
          :key="index"
          :class="ifyIndex == index ? 'active' : ''"
          @click="ifyActive(index, item.major)"
          >{{ item.major }}</span
        >
      </div>
      <Loading v-show="!classifyOneList.length"></Loading>
      <div class="loading">
        <Loading v-show="isLoading"></Loading>
      </div>
      <div
        class="cateAll"
        :style="{
          background: isLoading == true ? 'rgba(0, 0, 0, 0.4)' : '',
          filter: isLoading == true ? 'blur(10vw)' : '',
        }"
      >
        <div
          class="cateItem"
          v-for="(item, index) in classifyOneList"
          :key="index"
        >
          <router-link :to="`bookDetails/${item._id}`">
            <div class="itemimg">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemname">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </router-link>
        </div>
      </div>
      <!--分类分页 -->

      <div class="cateType">
        <span
          v-for="(item, index) in classifyListTwo"
          :key="index"
          :class="ifyTwoIndex == index ? 'active' : ''"
          @click="ifyActiveTwo(index, item.major)"
          >{{ item.major }}</span
        >
      </div>
      <Loading v-show="!classifyTwoList.length"></Loading>
      <div class="loadingtwo">
        <Loading v-show="isLoadingTwo"></Loading>
      </div>
      <div
        class="cateAll"
        :style="{
          background: isLoadingTwo == true ? 'rgba(0, 0, 0, 0.4)' : '',
          filter: isLoadingTwo == true ? 'blur(10vw)' : '',
        }"
      >
        <div
          class="cateItem"
          v-for="(item, index) in classifyTwoList"
          :key="index"
        >
          <router-link :to="`bookDetails/${item._id}`">
            <div class="itemimg">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemname">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 轻小说 -->
    <div class="easyBook">
      <div class="easyTitle">
        <div>
          <span class="zhu">轻小说</span>
          <!-- <span class="fu">起点编辑推荐</span> -->
        </div>
        <div class="more">
          <router-link
            :to="{
              path: '/morebook',
              query: {
                title: '轻小说',
                type: 'hot',
                major: '轻小说',
              },
            }"
            >更多<img src="../assets/dayu.png" alt=""
          /></router-link>
        </div>
      </div>
      <Loading v-show="!easyList.length"></Loading>
      <div class="easyAll">
        <div class="easyItem" v-for="(item, index) in easyList" :key="index">
          <router-link :to="`bookDetails/${item._id}`">
            <div class="itemimg">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemname">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="isLike">
      <div class="likeTitle">
        <div>
          <span class="zhu">猜你喜欢</span>
          <!-- <span class="fu">起点编辑推荐</span> -->
        </div>
        <div class="more"><img src="../assets/zm.png" alt="" />换一换</div>
      </div>
    </div>

    <!-- 精选专题 -->
    <!-- <div class="theme">
      <div class="themeTitle">
        <div>
          <span class="zhu">精选专题</span>
       
        </div>
      </div>
      <div class="themeimg" v-for="(item, index) in press" :key="index">
        <div v-for="(item, index) in item.bookCover" :key="index">
          <img :src="'http://statics.zhuishushenqi.com' + item" alt="" />
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import Loading from "../components/Loading";
export default {
  components: {
    Loading,
  },
  data() {
    return {
      press: [],
      HotList: [],
      newList: [],
      overList: [],
      freeList: [],
      rankList: [],
      activeIndex: 0,
      rankDetailsList: [],
      classifyList: [],
      ifyIndex: 0,
      classifyOneList: [],
      classifyListTwo: [],
      ifyTwoIndex: 0,
      classifyTwoList: [],
      easyList: [],
      isLoading: false,
      isLoadingTwo: false,
      isloadingRank: false,
    };
  },

  // 父分类
  created() {
    this.$axios.get("/categories").then((d) => {
      console.log(d);
      this.press = d.data.press;
    });
    // 子分类
    this.$axios.get("/sub-categories").then((data) => {
      this.classifyList = data.data.male.splice(0, 6);
      this.classifyListTwo = data.data.male.splice(0, 6);
    });
    // 子分类详情
    // 热门小说
    this.$axios
      .get(
        "/category-info?gender=male&type=hot&major=玄幻&minor=&start=0&limit=8"
      )
      .then((datas) => {
        this.HotList = datas.data.books;
        // console.log(datas);
      });
    // 新书
    this.$axios
      .get(
        "/category-info?gender=male&type=new&major=玄幻&minor=&start=0&limit=8"
      )
      .then((datas) => {
        console.log(datas);
        this.newList = datas.data.books.splice(0, 3);
      });
    // 完结
    this.$axios
      .get(
        "/category-info?gender=male&type=over&major=玄幻&minor=&start=0&limit=8"
      )
      .then((datas) => {
        this.overList = datas.data.books.splice(0, 3);
      });
    //免费
    this.$axios
      .get(
        "/category-info?gender=male&type=new&major=仙侠&minor=&start=0&limit=8"
      )
      .then((datas) => {
        this.freeList = datas.data.books.splice(0, 8);
        console.log(this.freeList);
      });
    // 排行
    this.$axios.get("/rank-category").then((d) => {
      console.log(d);
      this.rankList = d.data.male.splice(0, 4);
    });

    // 排行的初始化渲染
    this.$axios.get("/rank/54d42d92321052167dfb75e3").then((d) => {
      this.rankDetailsList = d.data.ranking.books.splice(0, 7);
    });
    // 分类的初始化渲染
    // 第一版
    this.$axios
      .get(
        "/category-info?gender=male&type=hot&major=玄幻&minor=&start=0&limit=8"
      )
      .then((datas) => {
        this.classifyOneList = datas.data.books.splice(0, 8);
      });
    // 第二版
    this.$axios
      .get(
        "/category-info?gender=male&type=hot&major=历史&minor=&start=0&limit=8"
      )
      .then((datas) => {
        this.classifyTwoList = datas.data.books.splice(0, 8);
      });

    // 轻小说
    this.$axios
      .get(
        "/category-info?gender=male&type=hot&major=轻小说&minor=&start=0&limit=8"
      )
      .then((datas) => {
        // console.log(datas);
        this.easyList = datas.data.books.splice(0, 8);
      });
  },
  methods: {
    activeTitle(index, id) {
      this.activeIndex = index;
      this.isloadingRank = true;
      this.$axios.get(`/rank/${id}`).then((d) => {
        this.rankDetailsList = d.data.ranking.books.splice(0, 7);
        this.isloadingRank = false;
      });
    },
    ifyActive(index, text) {
      this.ifyIndex = index;
      this.isLoading = true;
      this.$axios
        .get(
          "/category-info?gender=male&type=hot&major=" +
            text +
            "&minor=&start=0&limit="
        )
        .then((datas) => {
          this.classifyOneList = datas.data.books.splice(0, 8);
          this.isLoading = false;
        });
    },
    ifyActiveTwo(index, text) {
      this.ifyTwoIndex = index;
      this.isLoadingTwo = true;
      this.$axios
        .get(
          "/category-info?gender=male&type=hot&major=" +
            text +
            "&minor=&start=0&limit="
        )
        .then((datas) => {
          this.classifyTwoList = datas.data.books.splice(0, 8);
          this.isLoadingTwo = false;
        });
    },
    btnFenlei() {
      this.$router.push({
        path: "/category",
      });
    },
    btnPaihan() {
      document.documentElement.scrollTop = 800;
    },
    btnFree() {
      document.documentElement.scrollTop = 550;
    },
    btnOver() {
      document.documentElement.scrollTop = 1500;
    },
  },
};
</script>

<style lang="less" scoped>
span.active {
  color: white !important;
  background-color: rgb(237, 66, 75);
}
.home {
  background: rgb(246, 247, 249);
  padding-bottom: 40px;
}
.head {
  height: 44px;
  line-height: 44px;
  display: flex;
  justify-content: space-between;
  .title {
    font-weight: bold;
    font-size: 20px;
    margin-left: 4vw;
  }
  .head_img {
    margin-right: 4vw;
    img {
      margin-left: 6vw;
      width: 22px;
      height: 22px;
      vertical-align: middle;
    }
  }
}
.van-swipe {
  width: 92vw;
  margin: 0vw 4vw;
}

.search {
  a {
    position: relative;
    width: 100vw;
    input {
      width: 90vw;
      border: none;
      height: 32px;
      margin: 1vw 4vw 2vw 4vw;
      border-radius: 6px;
      position: relative;
    }
    img {
      height: 18px;
      width: 18px;
      position: absolute;
      left: 34vw;
      top: 0px;
    }
  }

  input::-webkit-input-placeholder {
    text-align: center;
    color: rgb(150, 155, 163);
    font-size: 14px;
  }
}

.grid {
  width: 100vw;
  padding: 2vw 0vw;
  background: #fff;
  display: flex;
  font-size: 13px;
  .gridItem {
    flex: 1;
    text-align: center;
    .gridimg {
      img {
        width: 26px;
        height: 26px;
      }
    }
  }
}
.hotBook {
  background: #fff;
  margin: 3vw 0vw;
  position: relative;
  .hotTitle {
    margin: 0vw 8vw;
    padding: 4vw 0vw;
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 12px;
      padding-left: 2vw;
    }
  }
  .hotAll {
    margin-left: 2vw;
    display: flex;
    overflow-x: scroll;
    .hotItem {
      margin: 0vw 2vw 2vw 2vw;
      .itemimg {
        width: 18vw;
        height: 24vw;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .itemname {
        font-size: 12px;
        color: rgb(51, 55, 61);
      }
      .author {
        font-size: 10px;
        color: rgb(179, 183, 189);
      }
    }
  }
}
.recommend {
  display: flex;
  margin: 0vw 4vw;
  padding: 2vw 0 4vw 0;
  div {
    flex: 1;
    border: 1px solid rgb(237, 68, 77);
    color: rgb(237, 68, 77);
    padding: 1.5vw;
    text-align: center;
    border-radius: 20px;
    font-size: 13px;
  }
  .one {
    margin-right: 2vw;
  }
  .two {
    margin-left: 2vw;
  }
}

.freeBook {
  background: #fff;
  margin: 3vw 0vw;
  position: relative;
  .freeTitle {
    display: flex;
    justify-content: space-between;
    margin: 0vw 4vw 0vw 8vw;
    padding: 4vw 0vw;
    .more {
      color: rgb(150, 155, 163);
      font-size: 14px;
      img {
        width: 20px;
        height: 20px;
        vertical-align: top;
      }
    }
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 14px;
      padding-left: 2vw;
    }
  }
  .freeAll {
    margin-left: 2vw;
    display: flex;
    overflow-x: scroll;
    .freeItem {
      margin: 0vw 2vw 2vw 2vw;
      .itemimg {
        width: 18vw;
        height: 24vw;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .itemname {
        font-size: 12px;
        color: rgb(51, 55, 61);
      }
      .author {
        font-size: 10px;
        color: rgb(179, 183, 189);
      }
    }
  }
}
.rankingBook {
  background: #fff;
  margin: 3vw 0vw;
  position: relative;
  .rankingTitle {
    display: flex;
    justify-content: space-between;
    margin: 0vw 4vw 0vw 8vw;
    padding: 4vw 0vw;
    .more {
      color: rgb(150, 155, 163);
      font-size: 14px;
      img {
        width: 20px;
        height: 20px;
        vertical-align: top;
      }
    }
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 14px;
      padding-left: 2vw;
    }
  }
  .rankingType {
    text-align: center;
    margin-bottom: 4vw;
    margin-left: 4vw;
    border: 1px solid rgb(237, 66, 75);
    width: 92vw;
    box-sizing: border-box;
    display: flex;
    border-radius: 6px;
    span {
      flex: 1;
      color: rgb(237, 66, 75);
      font-size: 14px;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      border-right: 1px solid rgb(237, 66, 75);
      &:last-child {
        border-right: none;
      }
    }
  }
  .rankloading {
    position: absolute;
    left: 50%;
    top: 50vw;
    margin-left: -22px;
    margin-top: -22px;
  }
  .rankingAll {
    margin-left: 2vw;
    display: flex;
    overflow-x: scroll;
    .rankingItem {
      margin: 0vw 2vw 2vw 2vw;
      .itemimg {
        width: 18vw;
        height: 24vw;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .itemname {
        font-size: 12px;
        color: rgb(51, 55, 61);
      }
      .author {
        font-size: 10px;
        color: rgb(179, 183, 189);
      }
    }
  }
}

.newBook {
  background: #fff;
  margin: 3vw 0vw;
  position: relative;
  .newTitle {
    display: flex;
    justify-content: space-between;
    margin: 0vw 4vw 0vw 8vw;
    padding: 4vw 0vw 0vw 0vw;
    .more {
      font-size: 14px;
      a {
        color: rgb(150, 155, 163);
        img {
          width: 20px;
          height: 20px;
          vertical-align: top;
        }
      }
    }
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 12px;
      padding-left: 2vw;
    }
  }
  .newAll {
    margin: 0vw 4vw;
    .newItem {
      border-bottom: 1px solid rgb(240, 241, 242);
      padding: 4vw 0vw 4vw 0vw;
      a {
        display: flex;
        .itemleft {
          img {
            width: 18vw;
            height: 26vw;
          }
        }
        .itemright {
          margin-left: 2vw;
          .itemname {
            font-weight: bold;
            font-size: 16px;
            color: black;
          }
          .synopsis {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: rgb(164, 155, 163);
            font-size: 14px;
            margin: 3vw 0;
          }
          .bom {
            display: flex;
            justify-content: space-between;
            .bom_left {
              img {
                width: 14px;
                height: 14px;
                vertical-align: middle;
              }
              .author {
                display: inline-block;
                color: rgb(164, 155, 163);
                font-size: 14px;
              }
            }
            .bom_right {
              .type {
                font-size: 12px;
                color: rgb(145, 150, 158);
                border: 1px solid rgb(226, 228, 230);
                margin-right: 1vw;
              }
              .isOk {
                font-size: 12px;
                color: rgb(237, 66, 75);
                border: 1px solid rgb(250, 203, 206);
                margin-right: 1vw;
              }
              .textNum {
                font-size: 12px;
                color: rgb(66, 132, 237);
                border: 1px solid rgb(203, 222, 250);
              }
            }
          }
        }
      }
    }
  }
}

.categoryRec {
  background: #fff;
  margin: 3vw 0vw;
  position: relative;
  .cateTitle {
    display: flex;
    justify-content: space-between;
    margin: 0vw 4vw 0vw 8vw;
    padding: 4vw 0vw 0vw 0vw;
    .more {
      font-size: 14px;
      a {
        color: rgb(150, 155, 163);
        img {
          width: 20px;
          height: 20px;
          vertical-align: top;
        }
      }
    }
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 12px;
      padding-left: 2vw;
    }
  }
  .cateType {
    text-align: center;
    margin: 4vw;
    border: 1px solid rgb(237, 66, 75);
    width: 92vw;
    box-sizing: border-box;
    display: flex;
    border-radius: 6px;

    span {
      flex: 1;
      color: rgb(237, 66, 75);
      font-size: 14px;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      border-right: 1px solid rgb(237, 66, 75);
      &:last-child {
        border-right: none;
      }
    }
  }
  .loading {
    position: absolute;
    left: 50%;
    top: 40vw;
    margin-left: -22px;
    margin-top: -22px;
  }
  .loadingtwo {
    position: absolute;
    left: 50%;
    top: 110vw;
    margin-left: -22px;
    margin-top: -22px;
  }
  .cateAll {
    margin-left: 2vw;
    display: flex;
    overflow-x: scroll;
    border-bottom: 1px solid rgb(240, 241, 242);
    .cateItem {
      margin: 0vw 2vw 2vw 0vw;
      .itemimg {
        width: 19vw;
        height: 24vw;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .itemname {
        font-size: 12px;
        color: rgb(51, 55, 61);
      }
      .author {
        font-size: 10px;
        color: rgb(179, 183, 189);
      }
    }
  }
}

.easyBook {
  background: #fff;
  // margin: 3vw 0vw;
  position: relative;
  .easyTitle {
    display: flex;
    justify-content: space-between;
    margin: 0vw 4vw 0vw 8vw;
    padding: 4vw 0vw;
    .more {
      font-size: 14px;
      a {
        color: rgb(150, 155, 163);
        img {
          width: 20px;
          height: 20px;
          vertical-align: top;
        }
      }
    }
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 12px;
      padding-left: 2vw;
    }
  }
  .easyAll {
    margin-left: 2vw;
    display: flex;
    overflow-x: scroll;
    .easyItem {
      margin: 0vw 2vw 2vw 2vw;
      .itemimg {
        width: 18vw;
        height: 22vw;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .itemname {
        font-size: 12px;
        color: rgb(51, 55, 61);
      }
      .author {
        font-size: 10px;
        color: rgb(179, 183, 189);
      }
    }
  }
}

.isLike {
  background: #fff;
  margin: 3vw 0vw;
  position: relative;
  .likeTitle {
    display: flex;
    justify-content: space-between;
    margin: 0vw 4vw 0vw 8vw;
    padding: 4vw 0vw;
    .more {
      color: rgb(150, 155, 163);
      font-size: 14px;
      img {
        width: 20px;
        height: 20px;
        vertical-align: top;
        margin-right: 2vw;
        vertical-align: middle;
      }
    }
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 12px;
      padding-left: 2vw;
    }
  }
}

.theme {
  background: #fff;

  position: relative;
  .themeTitle {
    display: flex;
    justify-content: space-between;
    margin: 0vw 4vw 0vw 8vw;
    padding: 4vw 0vw;
    .more {
      color: rgb(150, 155, 163);
      font-size: 14px;
      img {
        width: 4vw;
        height: 4vw;
        vertical-align: top;
        margin-right: 2vw;
        vertical-align: middle;
      }
    }
    &::before {
      content: "";
      display: inline-block;
      height: 18px;
      width: 2px;
      background: red;
      position: absolute;
      top: 4.5vw;
      left: 4vw;
    }
    .zhu {
      font-size: 16px;
      color: rgb(51, 55, 61);
    }
    .fu {
      color: rgb(177, 168, 195);
      font-size: 14px;
      padding-left: 2vw;
    }
  }
  .themeimg {
    display: flex;
    flex-wrap: wrap;
    margin: 0vw 4vw 4vw 4vw;
    div {
      width: 44vw;
      height: 40vw;
      &:nth-child(2) {
        margin-left: 4vw;
      }
      &:nth-child(3) {
        margin-top: 4vw;
      }
      &:nth-child(4) {
        margin-left: 4vw;
        margin-top: 4vw;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>